<template>
  <div>
    <el-divider>选项</el-divider>
    <div>
      <draggable :animation="340" :list="activeData.reserveProjectList" group="selectItem" handle=".option-drag">
        <div v-for="(item, index) in activeData.reserveProjectList" :key="index" class="select-item">
          <div class="select-line-icon option-drag">
            <i class="el-icon-s-operation" />
          </div>
          <el-input v-model="item.name" placeholder="项目名称" size="small" />
          <div class="select-line-icon" @click="handleSettingGoods(item, index)">
            <i class="el-icon-s-tools" />
          </div>
          <div class="close-btn select-line-icon" @click="activeData.reserveProjectList.splice(index, 1)">
            <i class="el-icon-remove-outline" />
          </div>
        </div>
      </draggable>
      <div style="margin-left: 20px; margin-bottom: 10px">
        <el-button icon="el-icon-circle-plus-outline" style="padding-bottom: 0" type="text" @click="addProjectItem">
          添加项目
        </el-button>
      </div>
    </div>
    <el-dialog title="项目信息" :visible.sync="dialogVisible">
      <el-form :model="selectProject" label-position="left" label-width="120px">
        <el-form-item
          :rules="[{ required: true, message: '请输入项目名称', trigger: 'blur' }]"
          label="项目名称"
          prop="name"
        >
          <el-input v-model="selectProject.name" />
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '请选择预约时间范围', trigger: 'blur' }]"
          label="预约时间范围"
          prop="reserveDateRangeType"
        >
          <el-radio-group v-model="selectProject.reserveDateRangeType">
            <el-radio :label="1">长期</el-radio>
            <el-radio :label="2">限时</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="selectProject.reserveDateRangeType === 2" label="时间范围" prop="reserveDateRange">
          <el-date-picker
            v-model="selectProject.reserveDateRange"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            range-separator="至"
            start-placeholder="开始日期"
            type="daterange"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预约周期" prop="openWeekDays">
          <el-checkbox-group v-model="selectProject.openWeekDays">
            <el-checkbox v-for="item in weekDayList" :key="item.id" :label="item.id"> {{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <el-form :model="selectProject" label-position="top">
        <el-form-item label="预约名额" prop="name">
          <p class="text-danger">请注意，不填写则表示无需限制预约名额</p>
          <table class="el-table el-table--border">
            <tbody>
              <tr>
                <th>星期1</th>
                <th>名额</th>
              </tr>
              <tr v-for="(value, name) in selectProject.quotaWeek" :key="name">
                <td class="el-table__cell is-center">{{ getWeekDayCn(name) }}</td>
                <td class="el-table__cell is-center">
                  <el-input
                    v-model="selectProject.quotaWeek[name]"
                    onkeyup="value=(isNaN(parseInt(value)) ? '' :  parseInt(value))"
                    style="width: 60%"
                  />
                </td>
              </tr>
            </tbody>
          </table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取 消 </el-button>
        <el-button type="primary" @click="handleSaveGoodsSetting"> 确 定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import mixin from './mixin'

const quotaWeek = {
  // 周日到周六
  0: null,
  1: null,
  2: null,
  3: null,
  4: null,
  5: null,
  6: null
}

export default {
  name: 'ConfigItemReserveDay',
  components: {
    draggable
  },
  mixins: [mixin],
  props: ['activeData'],
  data() {
    return {
      dialogVisible: false,
      selectProjectIndex: 0,
      selectProject: {},
      weekDayList: [
        {
          id: 1,
          name: '星期一'
        },
        {
          id: 2,
          name: '星期二'
        },
        {
          id: 3,
          name: '星期三'
        },
        {
          id: 4,
          name: '星期四'
        },
        {
          id: 5,
          name: '星期五'
        },
        {
          id: 6,
          name: '星期六'
        },
        {
          id: 0,
          name: '星期日'
        }
      ]
    }
  },
  methods: {
    getWeekDayCn(day) {
      console.log(day)
      return this.weekDayList.find((item) => item.id == day).name
    },
    addProjectItem() {
      this.activeData.reserveProjectList.push({
        id: new Date().getTime(),
        name: '项目',
        quotaWeek: quotaWeek,
        reserveDateRangeType: 1,
        reserveDateRange: [],
        openWeekDays: [0, 1, 2, 3, 4, 5, 6]
      })
    },
    handleSettingGoods(project, index) {
      this.selectProjectIndex = index
      this.dialogVisible = true
      let pro = JSON.parse(JSON.stringify(project))
      // 不设置得值会被删除 所以需要重新赋值
      Object.keys(quotaWeek).forEach((value, key) => {
        if (pro.quotaWeek[key] === undefined) {
          pro.quotaWeek[key] = null
        }
      })
      // 不设置checkbox 会报错 兼容历史数据
      pro.openWeekDays = pro.openWeekDays === undefined ? [0, 1, 2, 3, 4, 5, 6] : pro.openWeekDays
      this.selectProject = pro
    },
    handleSaveGoodsSetting() {
      this.$set(this.activeData.reserveProjectList, this.selectProjectIndex, this.selectProject)
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  align-items: center;

  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }

  & .el-input + .el-input {
    margin-left: 4px;
  }
}

.select-item + .select-item {
  margin-top: 4px;
}

.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}

.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
  cursor: pointer;
}

.option-drag {
  cursor: move;
}
</style>
